<template>
	<view class="content">
		<view class="formBox boxShadow">
			<view class="f-c-fs">
				<view class="label">活动名称：</view>
				<view class="value">长安跨店洗车50元</view>
			</view>
			<view class="f-c-fs">
				<view class="label">活动类型：</view>
				<view class="value">车辆销售</view>
			</view>
		</view>
		<view class="formBox">
			<view class="item  f-c-sa">
				<view style="flex:1">
					<view class="itemTitle">线索留资</view>
					<view class="num">100</view>
				</view>
				<view style="flex:1">
					<view class="itemTitle">分享次数</view>
					<view class="num">50</view>
				</view>
				<view style="flex:1">
					<view class="itemTitle">访客数</view>
					<view class="num">30</view>
				</view>
			</view>
			<view class="item  f-c-sa">
				<view style="flex:1">
					<view class="itemTitle">访客次数</view>
					<view class="num">20</view>
				</view>
				<view style="flex:1">
					<view class="itemTitle">绩效奖金</view>
					<view class="num">¥20</view>
				</view>
			</view>
		</view>
		<view class="formBox">
			<view class="item  f-c-sa">
				<view style="flex:1">
					<view class="itemTitle">新客户总成交</view>
					<view class="num">100</view>
				</view>
				<view style="flex:1">
					<view class="itemTitle">老客户总成交</view>
					<view class="num">50</view>
				</view>
			</view>
		</view>
		<view style="padding:20rpx">
			<u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection>
		</view>
		<view style="padding:20rpx">
			<u-search @search="search" placeholder="请输入手机号" v-model="shopList[current].listQuery.param" bg-color="#fff"
				:show-action="false"></u-search>
		</view>
		<view class=" formBox">
			<scroll-view scroll-x scroll-y class="table" @scrolltolower="scrolltolower">
				<uni-table border stripe emptyText="暂无更多数据" :loading="loading">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th v-for="(item, index) in tableTh" :key="index" align="center">{{ item }}</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in shopList[current].list" :key="index">
						<uni-td align="center">
							<image class="avatar" :src="item.wxUrl" mode=""></image>
						</uni-td>
						<uni-td align="center">{{ item.wxName }}</uni-td>
						<uni-td align="center">{{ item.customerProperty }}</uni-td>
						<uni-td align="center">{{ item.phone }}</uni-td>
						<uni-td align="center" v-if="current == 0">{{ item.amount }}</uni-td>
						<uni-td align="center" v-if="current == 1">{{ item.browseTime }}</uni-td>
						<uni-td align="center" v-if="current == 1">{{ item.browseDuration | formatSeconds }}</uni-td>
						<uni-td align="center">{{ item.phoneModel }}</uni-td>
						<uni-td align="center" v-if="current == 0">{{ item.payTime }}</uni-td>
					</uni-tr>
				</uni-table>
			</scroll-view>
		</view>
		<u-popup mode="bottom" v-model="show" :closeable="true" border-radius="26">
			<scroll-view scroll-y="true" style="height: 900rpx;padding: 40rpx 0;box-sizing: border-box;" class="">
				<view class="list">
					<u-empty v-if="!selectList.length" mode="list" style="margin-top: 200rpx;"></u-empty>
					<view class="item boxShadow" v-for="(item, index) in selectList" :key="item.storeId">
						<view class="f-c-fs">
							<view class="color color1" :class="'color' + item.storeType">{{ item.storeTypeStr }}</view>
						</view>
						<view class="item-title f-c-sb">
							<view>{{ item.storeName }}</view>
							<!-- <u-checkbox @change="checkboxChange1(index, item.checkbox, item.storeId)" v-model="item.checkbox"></u-checkbox> -->
						</view>
						<view class="info">{{ item.address }}</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>
<script>
	import {
		seckillData,
		seckillDataList
	} from '@/api/marketing';
	import {
		showStoreList
	} from '@/api/index'

	export default {
		data() {
			return {
				show: false,
				selectList: [],
				list: [
					{
						name: '已购买客户'
					},
					{
						name: '浏览客户'
					},
					{
						name: '线索客户'
					}
				],
				current: 0,
				phone: '',
				loading: false,
				seckillId: 0,
				detail: {},
				shopList: [{
						listQuery: {
							pageNo: 1,
							pageSize: 20,
							noData: true,
							param: ''
						},
						list: []
					},
					{
						listQuery: {
							pageNo: 1,
							pageSize: 20,
							noData: true,
							param: ''
						},
						list: []
					}
				]
			};
		},
		filters: {
			formatSeconds(value) {
				var theTime = parseInt(value); // 需要转换的时间秒
				var theTime1 = 0; // 分
				var theTime2 = 0; // 小时
				var theTime3 = 0; // 天
				if (theTime > 60) {
					theTime1 = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
					if (theTime1 > 60) {
						theTime2 = parseInt(theTime1 / 60);
						theTime1 = parseInt(theTime1 % 60);
						if (theTime2 > 24) {
							//大于24小时
							theTime3 = parseInt(theTime2 / 24);
							theTime2 = parseInt(theTime2 % 24);
						}
					}
				}
				var result = '';
				if (theTime > 0) {
					result = '' + parseInt(theTime) + '秒';
				}
				if (theTime1 > 0) {
					result = '' + parseInt(theTime1) + '分' + result;
				}
				if (theTime2 > 0) {
					result = '' + parseInt(theTime2) + '小时' + result;
				}
				if (theTime3 > 0) {
					result = '' + parseInt(theTime3) + '天' + result;
				}
				return result;
			}
		},
		computed: {
			tableTh() {
				if (this.current == 0 || this.current == 1) {
					return ['微信头像','昵称/姓名', '客户性质', '手机号', '浏览时间', '浏览时长', '手机型号','支付时间'];
				}else {
					return ['微信头像','昵称/姓名', '客户性质', '手机号', '咨询时间', '咨询时长', '手机型号', '访问次数'];
				}
			}
		},
		onLoad(option) {
			// this.seckillId = JSON.parse(option.param).id;
			// this.seckillDataFn();
			// this.seckillDataListFn();
		},
		methods: {
			lookStore() {
				showStoreList({
					storeId: this.detail.joinStores
				}).then(res => {
					res.data.forEach((val, index) => {
						res.data[index].checkbox = true
					})

					this.selectList = res.data
				})
			},
			search() {
				this.shopList[this.current].listQuery.noData = true;
				this.shopList[this.current].listQuery.pageNo = 1;
				this.seckillDataListFn();
			},
			setPhone(e) {
				this.phone = this.phone.replace(/[^\d]/g, '');
			},
			sectionChange(e) {
				this.current = e;
				if (this.shopList[this.current].listQuery.noData && this.shopList[this.current].listQuery.pageNo == 1) {
					this.seckillDataListFn();
				}
			},
			scrolltolower(e) {
				if (this.shopList[this.current].listQuery.noData) {
					this.loading = true;
					this.seckillDataListFn();
				}
			},
			seckillDataFn() {
				seckillData({
					seckillId: this.seckillId
				}).then(res => {
					this.detail = res.data;
					this.lookStore()
				});
			},
			seckillDataListFn() {
				var data = {
					...this.shopList[this.current].listQuery,
					seckillId: this.seckillId,
					useType: +this.current + 1
				};
				seckillDataList(data).then(res => {
					this.loading = false;
					if (this.shopList[this.current].listQuery.pageNo == 1) {
						this.shopList[this.current].list = res.data;
					} else {
						this.shopList[this.current].list = this.shopList[this.current].list.concat(res.data);
					}
					this.shopList[this.current].listQuery.pageNo += 1;
					if (this.shopList[this.current].listQuery.pageSize != res.data.length) {
						this.shopList[this.current].listQuery.noData = false;
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.content {
		padding-top: 20rpx;
	}

	.formBox {
		padding: 20rpx;

		.item {
			>view {
				border-right: 1px solid #ccc;
			}

			>view:last-child {
				border-right: none;
			}

			text-align: center;
			margin: 25rpx 0;

			.line {
				width: 2rpx;
				height: 74rpx;
				background-color: #dfdfdf;
			}

			.itemTitle {
				font-size: 24rpx;
				font-weight: 500;
				text-align: center;
				color: #131313;
				line-height: 36rpx;
				padding: 0 25rpx;
			}

			.num {
				font-size: 30rpx;
				font-weight: bold;
				text-align: center;
				color: #ff6738;
				line-height: 36rpx;
			}
		}

		.table {
			// width: 300%;
			height: 500rpx;
		}

		.avatar {
			width: 50rpx;
			height: 50rpx;
			margin: 0 auto;
		}
	}

	.list {
		width: 100%;

		.item {
			width: 660rpx;
			height: 231rpx;
			background: #ffffff;
			border-radius: 18rpx;
			margin: 23rpx auto;
			padding: 30rpx;
			box-sizing: border-box;

			.color {
				width: 110rpx;
				height: 36rpx;
				opacity: 1;
				background: #177fff;
				border-radius: 6rpx;
				font-size: 24rpx;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				line-height: 36rpx;
				margin-right: 18rpx;

				&.color1 {
					background: #177fff;
				}

				&.color2 {
					background: #ff6738;
				}

				&.color3 {
					background: #f54170;
				}

				&.color4 {
					background: #2db2ad;
				}
			}
		}

		.item-title {
			font-size: 28rpx;
			font-weight: 700;
			color: #131313;
			margin: 20rpx 0;
		}

		.info {
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
			line-height: 36rpx;
		}
	}
</style>
